

UI_panel_jerarquia = function(controller){
	
	var _genericDataTree = null;
	var _dateTreeType = "jquery";
	
	var _controller = controller;//CONTROLLER_JERARQUIA_SPACES
	var _this = this;
	
	
	var altoPanelArbol = $("#sidebarContainer").height() - $("#ulTabs").outerHeight(true);
	$("#panelJerarquia").css("height",altoPanelArbol+"px");
	
	
	$("#btnTreeSearch").click(function(){
		var value = $("#inputTreeSearch").val();
		$("#divArbolSpaces").jstree("search",value);
	});
	
	$("#btnTreeSearchClear").click(function(){
		$("#divArbolSpaces").jstree("clear_search");
	});
	
	this.setAutocomplete = function(arrAulas){
	  	$("#inputTreeSearch").autocomplete({
       	    source: _aulas_displonibles,
       	    minLength: 1,//2,//TODO
       	    open: function(event, ui){
       	       var widgetAutocomplete = $(this).autocomplete( "widget" );
       	       var altoWidget = $("#sidebarsMainContent").height() - $(this).offset().top + $(this).outerHeight();
       	       var ancho = $(this).width();
//       	       var altoWidget = $("#map").height() - $(this).offset().top + $(this).outerHeight();
       	       
       	        $(widgetAutocomplete).css({"max-height": altoWidget + "px", "overflow": "auto", "max-width" : ancho + "px"} );
       	    },
//       	    close: function(){
//       	        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
//       	    }
       	});
       	
       	$("#inputTreeSearch").autocomplete("widget").addClass("textFont");
	};
	
	
	this.getGenericDataTree = function(){return _genericDataTree;};
	/*
	 <ul>
		<li id="phtml_1">
			<a href="#">Root node 1</a>
			<ul>
				<li id="phtml_2">
					<a href="#">Child node 1</a>
				</li>
				<li id="phtml_3">
					<a href="#">Child node 2</a>
				</li>
			</ul>
		</li>
		<li id="phtml_4">
			<a href="#">Root node 2</a>
		</li>
	</ul>
	 * */
	
	//$("#divArbolSpaces")
	//version 3: se actualizo el JSON (aulas.txt). se muestra el arbol por niveles
	this.generateHTMLTree = function(data){ //return;
		
		$.jstree._themes = './'+$.jstree._themes;
		
		var idGen = 1;
		
		var ul_campus = $("<ul>");
		
		var ul_edificio, li_edificio, link_edificio;
		
		var li_nivel, link_nivel, ul_nivel; 
		
		var li_piso, link_piso, ul_piso; 
		
		var li_space, link_space;
		
		var nivel = null, niveles = null, pisosEnNivel = null, nivel_index = null;
		var piso = null, pisos = null;
		
		var idSpace = null;
		var nombreSpace = null;
		
		var spaceNameMaxLength = 0;
		
		//console.log("data",data);
	//	for (var nombreEdificio in data) //--> esto se 'cableo' cuando Ale genero el parser de aulas.txt 9/04/12 (COD 9_4_12)
		var nombreEdificio = data.nombre;
		{
			ul_edificio = $("<ul>");
			li_edificio = $("<li>");
			li_edificio.attr("tipo","building");
			li_edificio.attr("nombreEdificio", nombreEdificio);
			link_edificio = $("<a href='#'>").attr("id", "HTMLTree"+(idGen++)).html(data.nm);//(COD 9_4_12) nm = nombreParaMostrar
			
			pisos = data.pisos;//(COD 9_4_12)
			niveles = data.niveles;
			
			for (var indiceNivel in niveles){
				nivel = niveles[indiceNivel];
				
				li_nivel = $("<li>");
				link_nivel = $("<a href='#'>").attr("id", "HTMLTree"+(idGen++)).html(nivel.nm);//nivel.nombreParaMostrar
				ul_nivel = $("<ul>");
				
				pisosEnNivel = nivel.pisos;
				
				for (var i = 0, l_pisosEnNivel = pisosEnNivel.length; i < l_pisosEnNivel ; i++){
					
					piso = pisos[pisosEnNivel[i]];//pisosEnNivel[i] == indice para ir a buscar el piso al arreglo de pisos
					var nombrePiso =  piso.name;
					
					li_piso = $("<li>");
					link_piso = $("<a href='#'>").attr("id", "HTMLTree"+(idGen++)).html(piso.nm);
					ul_piso = $("<ul>");
					
					spaces = piso.spaces;				
					//nivel_index = piso.nivel;
					
					for (var j = 0, l_spaces = spaces.length; j < l_spaces; j++){
						idSpace = spaces[j][0];//id
						nombreSpace = spaces[j][1];//nombre
						
						li_space = $("<li>");
						link_space = $("<a href='#'>").attr("id", "HTMLTree"+(idGen++)).html(nombreSpace);
						
						li_space.attr("tipo","space");
						li_space.attr("nombreEdificio", nombreEdificio);
						li_space.attr("nombreNivel", indiceNivel);
						li_space.attr("nombrePiso", nombrePiso);
						li_space.attr("idSpace", idSpace); 
						li_space.attr("nombreSpace", nombreSpace); 
	
						li_space.append(link_space);
						ul_piso.append(li_space);
					};
					
					li_piso.attr("tipo","floor");
					li_piso.attr("nombrePiso", nombrePiso);
					li_piso.attr("nombreNivel", indiceNivel);
					li_piso.attr("nombreEdificio", nombreEdificio);
					li_piso.append(link_piso);
					li_piso.append(ul_piso);
					ul_nivel.append(li_piso);
					
				};//fin arreglo de pisos
				
				li_nivel.attr("tipo","level");
				li_nivel.attr("nombreNivel", indiceNivel);
				li_nivel.attr("nombreEdificio", nombreEdificio);
				li_nivel.append(link_nivel);
				li_nivel.append(ul_nivel);
				ul_edificio.append(li_nivel);
			}//fin arreglo de niveles
			
			li_edificio.append(link_edificio);
			li_edificio.append(ul_edificio);
			ul_campus.append(li_edificio);
		}
		
		$("#divArbolSpaces").append(ul_campus); //aca muestro los edificios dentro de un solo campus
		
		 _genericDataTree = ul_campus;

		_this.getJsTree();
		
		
		
		
	};//fin generateHTMLTree
	
	
	this.getJsTree = function(){
var aux = null;

		//***********************THEMING DEL ARBOL*************************************
		if (_dateTreeType == "apple"){
			 aux = $("#divArbolSpaces").jstree({
					// the `plugins` array allows you to configure the active plugins on this instance
					"plugins" : ["themes","html_data","ui","crrm","search"],
//					"themes" : {  "theme" : "default", "icons" : false}, 
//					"themes" : {  "theme" : "default-rtl"}, 
//					"themes" : {  "theme" : "classic"}, 
					"themes" : {  "theme" : "apple", "icons" : false}, 
					
					// each plugin you have included can have its own config object
					"core" : { "initially_open" : [ $("#divArbolSpaces a:first").attr("id") ] },
					"search":{"show_only_matches":true}
					// it makes sense to configure a plugin only if overriding the defaults
				});
		}else if (_dateTreeType == "jquery"){
			aux = $("#divArbolSpaces").jstree({
			// the `plugins` array allows you to configure the active plugins on this instance
			"plugins" : ["themeroller","html_data","ui","crrm","search"],
			
			// each plugin you have included can have its own config object
			"core" : { "initially_open" : [ $("#divArbolSpaces a:first").attr("id") ] },
			"search":{"show_only_matches":true}
			// it makes sense to configure a plugin only if overriding the defaults
			});
		}else{
			 aux = $("#divArbolSpaces").jstree({
					// the `plugins` array allows you to configure the active plugins on this instance
					"plugins" : ["themes","html_data","ui","crrm","search"],
					"themes" : {  "theme" : "default", "icons" : false}, 
//					"themes" : {  "theme" : "default-rtl"}, 
//					"themes" : {  "theme" : "classic"}, 
//					"themes" : {  "theme" : "apple", "icons" : false}, 
					
					// each plugin you have included can have its own config object
					"core" : { "initially_open" : [ $("#divArbolSpaces a:first").attr("id") ] },
					"search":{"show_only_matches":true}
					// it makes sense to configure a plugin only if overriding the defaults
				});
		}
		//fin ***********************THEMING DEL ARBOL*************************************
		
		//para el toggle
		if (_dateTreeType == "apple"){_dateTreeType = "jquery";}
		  else if(_dateTreeType == "jquery") { _dateTreeType = "default";}
		  else{_dateTreeType = "apple";}	
		
		
		aux.bind("open_node.jstree", function(event, data){
			CONTROLLER_PAGE_STATE.resizeSideBar();
			//alert('entre');
		})
		.bind("search.jstree", function (e, data) {
         //   alert("Found " + data.rslt.nodes.length + " nodes matching '" + data.rslt.str + "'.");
			CONTROLLER_PAGE_STATE.resizeSideBar();
		})
		.bind("select_node.jstree", function (event, data) {
            // `data.rslt.obj` is the jquery extended node that was clicked
			var obj = data.rslt.obj;
			
			//deseleccionamos el sprite (si es que hay alguno seleccionado)
			CONTROLLER_PAGE_STATE.hideActiveSprite();
			
		switch (obj.attr("tipo")){
			case "building": 
				
				var nombreEdificio = obj.attr("nombreEdificio");
				_controller.selectBuilding(nombreEdificio);
				
				break;
				
			case "level": 
				var nombreEdificio = obj.attr("nombreEdificio");
				var nombreNivel = obj.attr("nombreNivel");
				
				_controller.selectLevel(nombreEdificio, nombreNivel);
				
				break;
				
			case "floor": 
				
				var nombreEdificio = obj.attr("nombreEdificio");
				var nombreNivel = obj.attr("nombreNivel");
				var nombrePiso = obj.attr("nombrePiso");
				
				_controller.selectFloor(nombreEdificio, nombreNivel, nombrePiso);
				
				break;
				
				
			case "space":
				
				var nombreEdificio = obj.attr("nombreEdificio");
				var nombrePiso = obj.attr("nombrePiso");
				var nombreNivel = obj.attr("nombreNivel");
				var nombreSpace = obj.attr("nombreSpace");
				var idSpace = obj.attr("idSpace");
				
				_controller.selectSpace(nombreEdificio, nombreNivel, nombrePiso, idSpace);
				
				break;
				
			}
        });//fin bind
		return aux;
	};
	
};

